<template>
    <div class="project">
      <!-- 项目   -->
      <div class="wrapper">
        <div class="wb_header">
          <div>项目管理</div>
        </div>
        <div class="warp warp1">
          <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="">
              <el-select v-model="queryParams.province" placeholder="请选择省" filterable clearable  @change="ProvinceChange">
                <el-option v-for="(item,index) in provinceList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="queryParams.city" placeholder="请选择市" filterable clearable   @change="CityChange">
                <el-option v-for="(item,index) in cityList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="queryParams.county" placeholder="请选择区" filterable clearable >
                <el-option v-for="(item,index) in countyList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=""> 
              <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="queryParams.keyword"> </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList">查询</el-button>
              <el-button @click="resetQueryFrom">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="tableBtn">
            <button class="divBtn"  @click="openForm=true"><img class="plus" src="@/assets/images/加.svg" />新建项目</button>
          </div>
          <el-table v-loading="loading" :data="configList"> 
            <el-table-column label="项目名称" align="center" prop="name" show-overflow-tooltip/>
            <el-table-column label="项目编号" width="120" align="center" prop="projectNo" :show-overflow-tooltip="true" />
            <el-table-column label="项目类型" width="120" align="center" prop="type" :show-overflow-tooltip="true" />
            <el-table-column label="所属位置" align="center" prop="site" :show-overflow-tooltip="true"> </el-table-column> 
            <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" width="160" /> 
            <el-table-column label="更新时间" align="center" prop="updateTime" :show-overflow-tooltip="true" width="160" /> 
            <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true" /> 
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
              <template slot-scope="{row}"> 
                <el-button size="mini" type="text">踏勘数据</el-button> 
                <el-button size="mini" type="text">文件管理</el-button> 
                <el-button size="mini" type="text">监测点</el-button> 
                <el-button size="mini" type="text" class="color_success" @click="editProject(row)">编辑</el-button> 
                <el-button size="mini" type="text" class="color_danger" @click="deleteProject(row.id)">删除</el-button> 
              </template>
            </el-table-column>
          </el-table> 
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
        </div>
      </div>

      <el-dialog :title="form.id?'编辑项目':'新建项目'" :visible.sync="openForm" width="500px" append-to-body @closed="cancel('form')">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="项目编号" prop="projectNo">
              <el-input v-model="form.projectNo" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="项目类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> 
              </el-select>
            </el-form-item>
            <el-form-item label="省市区">
              <el-cascader v-model="siteval" clearable :options="district" @change="siteChange" style="width: 100%"></el-cascader>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('form','编辑')" v-show="form.id">修 改</el-button>
            <el-button type="primary" @click="submitForm('form','新增')" v-show="!form.id">新 增</el-button>
            <el-button @click="cancel('form')">取 消</el-button>
        </div>
    </el-dialog>
    </div>
</template>

<script>
import { districtJs } from "@/assets/js/district.js";
export default {
  data() {
    return {
      provinceList: [],
      cityList: [],
      countyList: [],
      citydata: [],
      district: districtJs(), 
      loading: true,
      configList:[],
      total: 0,
      queryParams:{
        page: 1,
        limit: 10,
        province: "",
        city: "",
        county: "",
        keyword: ""
      },
      form: {},
      openForm: false,
      rules: {
        name: [
          { required: true, message: '内容不能为空', trigger: 'blur' }, 
        ],
        projectNo: [
          { required: true, message: '内容不能为空', trigger: 'blur' }, 
        ],
        type: [
          { required: true, message: '内容不能为空', trigger: 'blur' }, 
        ],
      },
      siteval: "",
      typeOptions: [
        {label: "河坝监测", value: "河坝监测"},
        {label: "基坑监测", value: "基坑监测"},
        {label: "房屋安全监测", value: "房屋安全监测"},
        {label: "风机安全监测", value: "风机安全监测"},
        {label: "地灾监测", value: "地灾监测"},
      ]
    }
  },
  mounted() {
    this.getprovinceList();
    this.getList();
  },
  methods:{ 
    deleteProject(id){
      let _this = this;
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = process.env.VUE_APP_SERVER_API_URL + "/iot-project/delete";
          let data = new FormData();
          let idList = [id];
          data.append("idList", idList);
          _this.$axios.post(url, data).then(res => {
            if(res.data.code == 200){
              _this.$message.success(res.data.msg);
              _this.getList();
            }else{
              _this.$message.error(res.data.msg);
            }
          })
        }).catch(() => {});
    },
    editProject(row){
      let _this = this;
      _this.form = {...row}; 
      _this.siteval = row.site.split("/");
      _this.openForm = true;
    },
    siteChange(val){ 
      this.form.site = val.join("/");
    },
    submitForm(formName,type){
      let _this = this;
      _this.$refs[formName].validate((valid) => {
          if (valid) { 
            var url;
            if(type == "新增"){ 
              url = process.env.VUE_APP_SERVER_API_URL + "/iot-project/insert";
            }else{ 
              url = process.env.VUE_APP_SERVER_API_URL + "/iot-project/update";
            } 
            let data = _this.form;
            _this.$axios.post(url, data).then(res => { 
              if(res.data.code == 200){
                _this.$message.success(res.data.msg);
                _this.cancel('form');
                _this.getList();
              }else{
                _this.$message.error(res.data.msg);
              }
            });
          } else { 
            return false;
          }
        });
    },
    cancel(){
      this.openForm = false;
      this.resetForm("form");
      this.form = {};
      _this.siteval = "";
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    resetQueryFrom(){
      this.queryParams = {
        page: 1,
        limit: 10,
        province: "",
        city: "",
        county: "",
        keyword: ""
      }
      this.getList();
    },
    CityChange(val){ 
      let _this = this;
      _this.countyList = []; 
      _this.citydata.forEach(item => {
        if(item.label == val){
          item.children.forEach(item2 => {
            _this.countyList.push({label: item2.label, value: item2.label});
          }); 
        }
      });
      
      _this.queryParams.county = "";
    },
    ProvinceChange(val){ 
      let _this = this;
      _this.cityList = []; 
      _this.queryParams.city = "";
      _this.district.forEach(item => {
        if(item.label == val){
          item.children.forEach(item2 => {
            _this.cityList.push({label: item2.label, value: item2.label}); 
            _this.citydata.push(item2);
          }); 
        }
      }); 
    },
    getprovinceList(){
      let _this = this;
      _this.provinceList = [];
      _this.district.forEach(item => {
        _this.provinceList.push({label: item.label, value: item.label})
      });

    },
    getList(){
      let _this = this;
      let params = _this.queryParams;
      let url = process.env.VUE_APP_SERVER_API_URL + "/iot-project/getAllData";
      _this.$axios.get(url, {params}).then(res=>{ 
        _this.loading = false;
        _this.configList = res.data.data.records;
        _this.total = res.data.data.total;
      })
    }, 
  }
}
</script>

<style scoped>
@import "~@/assets/styles/tablePage.scss";
</style>